<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			html,body{
				width: 100%;
			}
			.main{
				width: 100%;
				height: 100vh;
				background: linear-gradient(to right,#D0D0D0, #E2E2E2);				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.imgdiv{
				width: 100px;
				height: 100px;
				position: relative;
				animation: circling 60s linear 0s infinite;
				border-radius: 50%;
			}
			.imgdiv:hover{
				cursor: pointer;
			}
			.imgdiv>img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.imgdiv>div{
				position: absolute;
				top: 0px;
				width: 100%;
				height: 100%;
				background: url(img/src=http___b播放.jpg) no-repeat center center ;
				background-size:cover;
				/* background-color: rgba(0,0,0,0.3); */
				background-size: 100% 100%;
				opacity: 0.5;
				border-radius: 50%;
				display: none;
			}
			.imgdiv>img:hover{
				cursor: pointer;
				z-index: 199;
			}
			.imgdiv>img:hover +.imgMantle{			
				display: block;
			  z-index: 0;
			}
			
			@keyframes circling {
			from {
			transform: rotate(0deg);
			
			}
			
			to {
			transform: rotate(360deg);
			
			}
			
			}
			
			
			.imgdiv1{
				width: 300px;
				height: 300px;
				background-color: yellow;
				position: relative;
			}
			.imgtopnav{
				width: 100%;
				height: 20px;
				position: absolute;				
				background-color: #000000;
				opacity: 0;
				top: 0px;
				transition: all 0.5s ease-in-out;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="main">
			
			<div class="imgdiv">
				<img  src="主页demo/img/cat.jpg" />
				<div class="imgMantle">
					
				</div>
			</div>	
		</div>
		
		<div class="imgdiv1">
			<div class="imgtopnav">dawad</div>
		</div>
		
		
		<script>
			$(function(){
				$(".imgdiv1").hover(function(){
					$(".imgtopnav").css({
						"opacity":"0.5",
						"height":"50px",
						"transtion":"all 0.5s ease-in-out",						
					})
				},function(){
					$(".imgtopnav").css({
						"opacity":"0",
						"height":"20px",
						"transtion":"all 0.5s ease-in-out",						
					})
				})
			})
		</script>
	</body>
</html>
